<template>
	<kb-layout>
		<view class="form-body u-p-30">
			<view class="line-border u-margin-bottom-30"> </view>
			<view class="u-flex u-flex-content-end ">
				<view class="u-flex-grow"> </view>
				<view class="">
					<u-button @click="submit" text="确 定" size="small" shape="circle" type="primary"></u-button>
				</view>
			</view>
			<view class="form">
				<up-form labelPosition="left" labelWidth="80" :model="FormData" :rules="rules" ref="form1">
					<up-form-item label="姓" prop="userInfo.first_name" borderBottom ref="first_name">
						<up-input v-model="FormData.userInfo.first_name" placeholder="必填,请填写" border="" suffixIcon="man-add"
							suffixIconStyle="color: #3C9CFF;"></up-input>
					</up-form-item>

					<up-form-item label="名" prop="userInfo.name" borderBottom ref="name">
						<up-input v-model="FormData.userInfo.name" placeholder="必填,请填写" border=""></up-input>
					</up-form-item>

					<up-form-item label="手机号" prop="userInfo.mobile" borderBottom ref="mobile">
						<up-input v-model="FormData.userInfo.mobile" placeholder="必填,请填写" border=""></up-input>
					</up-form-item>

					<!-- <up-form-item label="证件类型" prop="userInfo.identity_type" borderBottom ref="identity_type">
						<up-input v-model="FormData.userInfo.identity_type"
						placeholder="必填,请选择" border="" @click="pickerShow=true"
						 ></up-input>
						<up-picker :show="pickerShow" :defaultIndex="[0]"
						 @confirm="pickerConfirm" :columns="identity_type"></up-picker>
					</up-form-item>
					
					<up-form-item label="证件号" prop="userInfo.identity" borderBottom ref="identity">
						<up-input v-model="FormData.userInfo.identity" 
						placeholder="必填,请填写证件号" border=""
						 ></up-input>
					</up-form-item> -->

					<up-checkbox :customStyle="{marginBottom: '8px'}" label="阅读并同意以下内容" name="agree" usedAlone
						v-model:checked="aloneChecked" @change="aloneChecked=!aloneChecked">
					</up-checkbox>
					<view class="u-tips-color tips">
						<text class="font-size12">
							根据相关法律法规及平台相关要求，预订及购买门票、客房等需要实名制的旅行度假商品需提供出行人的身份证件信息，
							并需要再服务中出具对应身份证件用于验证，请确保录入信息真实有效。本平台小程序将通过加密等方式保护您录入的身份证信息，
							且仅在具体交易中授权提供给与您进行交易的相关服务提供方。
						</text>
					</view>
				</up-form>
			</view>
		</view>
	</kb-layout>
</template>

<script>
	import { addPeople,getPeople } from '../../common/api';
	export default {
		data() {
			return {
				FormData: {
					userInfo: {
						name: '',
						first_name: '',
						mobile: '',
						identity: '',
						identity_type: '身份证',
					}
				},
				aloneChecked: false,
				pickerShow: false,
				identity_type: [
					['身份证', '其他有效证件']
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写您的名称',
						trigger: ['blur', 'change'],
					},
					'userInfo.first_name': {
						type: 'string',
						required: true,
						message: '请填写您的姓氏',
						trigger: ['blur', 'change'],
					},
					'userInfo.mobile': {
						type: 'string',
						required: true,
						message: '请填写您的手机号',
						trigger: ['blur', 'change'],
					},
				}
			}
		},
		onLoad(option) {
			this.ee.setBackRefresh(false);
			if(option.id){
				this.aloneChecked = true;				
				getPeople(option.id).then((ret)=> this.FormData.userInfo = ret )
			}
		},
		methods: {
			pickerConfirm(e) {
				this.pickerShow = false;
				this.FormData.userInfo.identity_type = e.value[0];
			},
			submit() { 
				this.$refs.form1.validate().then(valid => {
					if(this.aloneChecked == false){
						uni.$u.toast('请勾选“阅读并同意以下内容”');
						return false;
					}
					if(valid){
						const that = this;
						addPeople(this.FormData.userInfo).then((ret)=>{
							// uni.$u.toast('保存成功');
							that.ee.setBackRefresh(true);//通知返回页面更新
							uni.navigateBack();
							// setTimeout(()=>{ },1000) 
						})
					}else{
						uni.$u.toast('请完善输入')
					}
				}).catch(() => {
					// 处理验证错误  
					uni.$u.toast('请完善输入')
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-body {
		background-color: #fff;

		.tips {
			text-align: justify;
		}
	}
</style>